// let main = document.querySelector("#main");
// main.style.width = window.innerWidth
// main.style.height = window.innerHeight
new Vue({
  el: "#app",
  data() {
    return {
      form: {
        App_ID: "",
        Open_ID: "",
        token: $.cookie("token"),
      },
      shop: [],
    };
  },
  mounted() {
    this.getList(this.form);
  },
  methods: {
    getList() {
      let that = this;
      var myChart = echarts.init(document.getElementById("main"), "macarons");
      //创建Nodes
      // nodes = [{
      //   name: "1", zs: "北货郎", label: "北货郎", category: 0
      // }, {
      //   name: "4", zs: "随便", label: "随便", category: 0
      // }, {
      //   name: "5", zs: "黑龙江数字供应链有限公司", label: "黑龙江数字供应链有限公司", category: 0
      // }]
      //创建links
      let list = [];
      $.ajax({
        headers: requestHeaders(),
        url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
        type: "POST",
        data: {
          SQLSerialNumber: "enterprise_gxt",
          Condition: "",
          ExtensionCondition: "",
        },
        success: function (nodes) {
          console.log(nodes);

          $.ajax({
            headers: requestHeaders(),
            // url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
            url: `${BASE_URL2}/clientOperation/getEnterpriseTradeRelation`,
            // url: `http://192.168.10.66:8083/clientOperation/getEnterpriseTradeRelation`,
            type: "get",
            data: {
              // SQLSerialNumber: "group1",
              // Condition: "",
              // ExtensionCondition: "",
            },
            success: function (data) {
              console.log(data);

              data.forEach((item) => {
                if (item.type == "1") {
                  list.push({
                    weight: 1,
                    zs: " <b><font color='red'> ————> </font></b> <br>  销售 <br><br>   ",
                    source: item.source,
                    target: item.target,
                  });
                } else {
                  list.push({
                    weight: 1,
                    zs: " <b><font color='blue'> ————> </font></b> <br>  求购 <br><br>   ",
                    source: item.source,
                    target: item.target,
                  });
                }
              });
              categoryArray = [];
              jsondata = {
                categories: categoryArray,
                nodes: nodes,
                links: list,
              };

              //数据格式为Json格式
              createGraph(myChart, jsondata);
            },
            complete: function (XMLHttpRequest) {
              requestPretreatment(XMLHttpRequest);
            },
            dataType: "json",
          });
        },
        complete: function (XMLHttpRequest) {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    onSerach() {
      this.getList(this.form);
    },
  },
});
function getOption(graphInfo) {
  title = graphInfo["title"];
  nodes = graphInfo["nodes"];
  links = graphInfo["links"];
  categories = graphInfo["categories"];
  //设置option样式
  var option = {
    title: {
      text: title,
      x: "right",
      y: "bottom",
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        //触发之后返回的参数，这个函数是关键
        var abc = "<b>" + params.data.zs + "</b>";
        return abc;
      },
    },
    color: ["#EE6A50", "#4F94CD", "#B3EE3A", "#DAA520"],
    toolbox: {
      show: true,
      feature: {
        restore: { show: true },
        magicType: { show: true, type: ["force", "chord"] },
        saveAsImage: { show: true },
      },
    },
    legend: {
      x: "left",
      data: categories,
    },
    series: [
      {
        type: "force",
        name: title,
        ribbonType: false,
        categories: categories,
        itemStyle: {
          normal: {
            label: {
              show: true,
              textStyle: {
                color: "#333",
              },
            },
            nodeStyle: {
              brushType: "both",
              borderColor: "rgba(255,215,0,0.4)",
              borderWidth: 1,
            },
            linkStyle: {
              type: "curve",
              //,text:"hahahah"
            },
          },
          emphasis: {
            label: {
              show: false,
              // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            nodeStyle: {
              //r: 30
            },
            linkStyle: {},
          },
        },

        useWorker: false,
        minRadius: 20,
        maxRadius: 20,
        gravity: 3.1,
        scaling: 2.5,
        linkSymbol: "arrow",
        roam: "move",
        nodes: nodes,
        links: links,
      },
    ],
  };
  return option;
}
function createGraph(myChart, mygraph) {
  //设置option样式
  option = getOption(mygraph);
  //使用Option填充图形
  myChart.setOption(option);
  //点可以跳转页面
  // myChart.on('click', function (params) {
  //             var data=params.value
  //             //点没有source属性
  //             if(data.source==undefined){
  //                 nodeName=params.name
  //                 window.open("http://www.baidu.com")
  //             }
  // });
  myChart.on("mouseup", function (params) {
    var option = myChart.getOption();
    option.series[0].data[params.dataIndex].x = params.event.offsetX;
    option.series[0].data[params.dataIndex].y = params.event.offsetY;
    option.series[0].data[params.dataIndex].fixed = true;
    myChart.setOption(option);
  });
  //myChart.hideLoading();
}
